<template>
    <div class="login-page">
        <img class="login-bg" src="@/assets/images/login/bg.jpg"/>
        <el-card class="login-card">
            <img class="login-logo" src="@/assets/images/login/login-logo.png"/>
            <div class="text-center text-xl title">{{ $store.state.site_title }}</div>
            <!-- 登录表单 -->
            <div class="login-form">

            <el-form
              :model="form"
              :rules="rules"
              ref="form"
              label-position="top"
              class="login-card-form"
              @submit.native.prevent="login">
                <el-form-item prop="account">
                    <el-input
                      :autofocus="true"
                      placeholder="请输入账号"
                      v-model="form.account"/>
                </el-form-item>
                <el-form-item prop="password" class="password">
                    <el-input
                    placeholder="请输入密码"
                    type="password"
                    v-model="form.password"
                    class="password"/>
                </el-form-item>
                <el-form-item prop="code">
                    <div class="flex items-center justify-between">
                        <el-input
                            class="login-card-code"
                            placeholder="请输入图形验证码"
                            type="text"
                            v-model="form.code"
                        ></el-input>
                        <img :src="codeImg" class="login-code-image" @click="refreshCodeImg()">
                    </div>
                </el-form-item>
                <el-button class="forget-password" type="text" @click="onJumpReset">忘记密码</el-button>
                <el-form-item class="login-card-btn center">
                    <el-button
                      type="primary"
                      native-type="submit"
                      :loading="isBtnLoading">
                      {{btnText}}
                    </el-button>
                </el-form-item>
            </el-form>

            </div>
            <!-- 登录表单结束 -->
            <a href="/login" class="cursor-pointer">
                <div class="client-login text-center">切换为 学员登录</div>
            </a>
        </el-card>

        <!-- 申请账号 -->
        <a
            href="//vip.msup.com.cn/index.php/weixin/feedback/form-feedback?formId=2095"
            target="_blank"
            class="apply-for-account">还没有角色地图企业账号？企业试用申请</a>

        <footers show isFixed/>
    </div>
</template>

<script>
import {
    Input, Form, FormItem,
} from 'element-ui';
import footers from '@/components/layout/Footer';

export default {
    components: {
        ElInput: Input,
        ElForm: Form,
        ElFormItem: FormItem,
        footers,
    },
    data() {
        return {
            codeImg: '',
            form: {
                account: '',
                password: '',
                code: '',
            },
            rules: {
                account: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ],
                code: [
                    { required: true, message: '请输入图形验证码', trigger: 'blur' },
                ],
            },
            isBtnLoading: false,
            typeName: '',
        };
    },
    computed: {
        btnText() {
            if (this.isBtnLoading) return '登录中...';
            return '管理员登录';
        },
    },
    methods: {
        login() {
            this.$refs.form.validate((valid) => {
                if (!valid) return;
                this.isBtnLoading = true;
                API.post('auth/login', this.form).then((res) => {
                    if (res && res.id) {
                        if (res.company_id === 0) {
                            res.permission = JSON.parse(res.permissions);
                            this.$store.commit('setMy', res);
                        } else {
                            API.get('permission/list/id').then((permission) => {
                                res.permission = permission;
                                this.$store.commit('setMy', res);
                            });
                        }

                        if (this.typeName) {
                            this.$router.back();
                        } else {
                            const corpid = this.$route.query.corpid;
                            this.bingDingTalk(corpid, res);
                        }
                    } else {
                        $ele.$message.error('账号密码错误！');
                    }
                }).catch(err => {
                    this.refreshCodeImg();
                    $ele.$message.error(err.message);
                }).finally(() => {
                    this.isBtnLoading = false;
                });
            });
        },
        refreshCodeImg() {
            this.codeImg = `${API.base_url}../supplier/captcha?${Math.random()}`;
        },
        onJumpReset() {
            this.$router.push('/reset-password');
        },

        toHelp() {
            this.$router.push({
                name: 'Help',
            });
        },

        bingDingTalk(corpid, my) {
            if (corpid && my.company_id) {
                if (!my.ding_corpid) {
                    API.post('ding_company_check/bind_ding', {corpid}).then(() => {
                        $ele.$message.success('钉钉绑定企业成功');
                        my.ding_corpid = corpid;
                        this.$store.state.my.ding_corpid = corpid;
                        sessionStorage.setItem('my/profile', JSON.stringify(my));
                    });
                    this.$router.push({path: '/dashboard'});
                } else if (my.ding_corpid !== corpid) {
                    $ele.$confirm('此企业帐号已绑定钉钉企业，是否重新绑定为当前钉钉企业？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }).then(() => {
                        API.post('ding_company_check/bind_ding', {corpid}).then(() => {
                            $ele.$message.success('钉钉绑定企业成功');
                            my.ding_corpid = corpid;
                            this.$store.state.my.ding_corpid = corpid;
                            sessionStorage.setItem('my/profile', JSON.stringify(my));
                        });
                    }).finally(() => this.$router.push({path: '/dashboard'}));
                } else this.$router.push({path: '/dashboard'});
            } else {
                this.$router.push({path: '/dashboard'});
            }
        },
    },
    mounted() {
        this.refreshCodeImg();

        this.typeName = this.$route.query.type;
    },
};
</script>

<style lang="scss">
    .login-page {
        box-sizing: border-box;
        position: relative;
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: #e1e2e2;
        text-align: left;

        padding-bottom: 60px;
        @media (max-width: 960px) {
            padding-bottom: 40px;
        }

        .el-card {
            position: relative;
            width: 80%;
            max-width: 420px;
            overflow: visible;
            border-radius: 10px;

            .el-card__body {
                padding: 12px 0 0 0;
            }

            .login-form {
                padding: 0 40px;
                @media (max-width: 960px) {
                    padding: 0 30px;

                    .el-form-item {
                        margin-bottom: 12px;
                    }
                }
            }
        }

        .login-card-code {
            width: 150px;
            flex: 0 0 auto;
        }

        .login-code-image {
            width: 75px;
            height: 32px;
        }

        .login-card-btn {
            margin-top: 10px;

            .el-button {
                background: #2d70ae;
            }

            .el-button--primary {
                border-color: #2d70ae;
            }
        }

        .title {
            font-weight: bold;
            font-size: 26px;
            text-align: center;
            margin: 15px 0 30px 0;

            @media (max-width: 960px) {
                font-size: 20px;
            }
        }

        .el-button {
            width: 100%;
            height: 42px;
            font-size: 14px;
        }

        .forget-password {
            width: 83px;
            height: 30px;
            text-align: left;
            color: #2d70ae;
        }

        .el-input__inner {
            height: 35px;
            line-height: 35px;
            font-size: 14px;
        }

        .footer {
            text-align: center;
            font-size: 14px;
            padding-top: 5px;
        }

        .login-bg {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            object-fit: cover;
        }

        .login-logo {
            width: 193px;
            height: auto;
            margin: 0 auto;
        }

        .client-login {
            width: 100%;
            height: 50px;
            line-height: 50px;
            margin-top: 30px;
            background: rgba($color: #2d70ae, $alpha: .16);
            color: #2d70ae;
            font-weight: bold;

            @media (max-width: 960px) {
                margin-top: 20px;
            }
        }

        .apply-for-account {
            position: relative;
            margin-top: 40px;
            font-size: 16px;
            line-height: 22px;
            color: white;
            border-bottom: 1px solid white;
        }
    }
</style>
